<template>
  <dv-full-screen-container>
    <header>
      <div class="header-content">
        <h1 class="main-title">金融交易风险画像平台</h1>
      </div>
    </header>
    <div class="body" style="padding: 0px 60px;">


      <!-- <img src="/user.png" style="position: absolute; top: 36%; left: 46%;" /> -->
      <div class="container">
        <div class="left">
          <Box title="基础信息">
            <div style="padding: 0 20px;">
              <dv-border-box12 class="info-item" style="width: 50%;">
                <div class="content" style=" text-align: right;">
                  <div class="tech-text" style="font-size: 18px;">158xxxx1645</div>
                  <div>手机号</div>
                </div>
              </dv-border-box12>
              <dv-border-box12 class="info-item" style="width: 50%;">
                <div class="content" style=" text-align: right;">
                  <div class="tech-text" style="font-size: 18px;">2</div>
                  <div>信用卡数量</div>
                </div>
              </dv-border-box12>
              <dv-border-box12 class="info-item" style="width: 50%;">
                <div class="content" style=" text-align: right;">
                  <div class="tech-text" style="font-size: 18px;">男</div>
                  <div>性 别</div>
                </div>
              </dv-border-box12>
              <dv-border-box12 class="info-item" style="width: 50%;">
                <div class="content" style=" text-align: right;">
                  <div class="tech-text" style="font-size: 18px;">1991-10-31</div>
                  <div>出生日期</div>
                </div>
              </dv-border-box12>
            </div>
          </Box>
          <Box title="风险雷达" style="text-align: center;">
            <div ref="container" id="container" style="width: 240px; height: 150px;margin: 0 auto;"></div>
          </Box>
        </div>
        <div class="middle">
          <dv-border-box10 title="综合风险" :title-width="200" :animate="true" style="height: 360px;margin-top: 40px;">
            <div style=" padding: 20px;">
              <dv-border-box12 class="info-item"
                style="width: 33%; height: 80px; float: left; background-image: url('/flash.png');">
                <div style="text-align: right;padding: 5px 20px 0 0;">
                  <div class="tech-text" style="font-size: 28px;">30</div>
                  <div class="tech-text" style="font-weight: bold;">异常转账风险指数</div>
                </div>
              </dv-border-box12>
              <dv-border-box12 class="info-item"
                style="width: 33%; height: 80px; float: left; background-image: url('/flash1.png')">
                <div style="text-align: right;padding: 5px 20px 0 0;">
                  <div class="tech-text" style="font-size: 28px;">88</div>
                  <div class="tech-text" style="font-weight: bold;">伪冒注册风险指数</div>
                </div>
              </dv-border-box12>
              <dv-border-box12 class="info-item"
                style="width: 33%; height: 80px; float: left; background-image: url('/flash.png');">
                <div style="text-align: right;padding: 5px 20px 0 0;">
                  <div class="tech-text" style="font-size: 28px;">10</div>
                  <div class="tech-text" style="font-weight: bold;">赌博违规风险指数</div>
                </div>
              </dv-border-box12>
            </div>
            <div style="width: 150px; height: 150px;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);">
              <dv-decoration-9 style="width:150px;height:150px;">
                <div class="tech-text" style="font-size: 48px; font-family: 'LCD', sans-serif;">80</div>
              </dv-decoration-9>
              <div>
                <h2>综合风险指数</h2>
              </div>

            </div>
          </dv-border-box10>

        </div>
        <div class="right">
          <div class="tags">
            <Box class="" title="商户违规" :title-width="400" :animate="true">
              <div style="padding:0 20px;">
                <dv-border-box7>
                  <dv-scroll-board :config="config" style="width:100%;height:160px" @mouseover="mouseoverHandler"
                    @click="clickHandler" />
                </dv-border-box7>
              </div>
            </Box>
          </div>
          <div class="tags">
            <Box class="" title="团伙套现" :title-width="400" :animate="true">
              <div style="padding:0 20px;">
                <dv-border-box7>
                  <dv-scroll-board :config="config" style="width:100%;height:160px" @mouseover="mouseoverHandler"
                    @click="clickHandler" />
                </dv-border-box7>
              </div>
            </Box>
          </div>
        </div>
      </div>

      <div style="display: flex; justify-content: space-between;">
        <Box class="" title="黄牛营销" :title-width="400" :animate="true">
          <div style="padding:0 20px;">
            <dv-border-box7>
              <dv-scroll-board :config="config" style="width:100%;height:160px" @mouseover="mouseoverHandler"
                @click="clickHandler" />
            </dv-border-box7>
          </div>
        </Box>
        <Box class="" title="黄牛营销" :title-width="400" :animate="true">
          <div style="padding:0 20px;">
            <dv-border-box7>
              <dv-scroll-board :config="config" style="width:100%;height:160px" @mouseover="mouseoverHandler"
                @click="clickHandler" />
            </dv-border-box7>
          </div>
        </Box>
        <Box class="" title="黄牛营销" :title-width="400" :animate="true">
          <div style="padding:0 20px;">
            <dv-border-box7>
              <dv-scroll-board :config="config" style="width:100%;height:160px" @mouseover="mouseoverHandler"
                @click="clickHandler" />
            </dv-border-box7>
          </div>
        </Box>
      </div>
    </div>
    <div style="position: absolute; right: 70px; top: 45px; width: 400px;display: flex;justify-content: space-between;">
      <dv-button :bg="true" @click="console.log('click')">202411</dv-button>
      <dv-button :bg="true" @click="console.log('click')">202410</dv-button>
      <dv-button :bg="true" @click="console.log('click')">202409</dv-button>
      <dv-button :bg="true" @click="console.log('click')">202408</dv-button>
    </div>
  </dv-full-screen-container>
</template>

<script setup lang='ts'>

const config = reactive({
  header: ['标签', '值'],
  headerBGC: '#253090',
  oddRowBGC: 'none',
  evenRowBGC: 'none',
  rowNum: 4,
  data: Array.from({ length: 12 }, (_, i) => ['标签' + (i + 1), '' + i]),
  index: true,
  columnWidth: [50],
  align: ['center'],
})

const mouseoverHandler = (e: any) => {
  console.log(e)
}

const clickHandler = (e: any) => {
  console.log(e)
}

import { onMounted } from 'vue'
import Box from '../components/Box.vue';
// import {ayin_tech_border_a1} from 'techui-vue3-lite'

import { Radar } from '@antv/g2plot';
import { Line, Funnel } from '@antv/g2plot';
import { reactive } from 'vue'

// 数据更新于 2021.01.09
const data = [
  { name: '异常转账', star: 30 },
  { name: '伪冒注册', star: 88 },
  { name: '赌博违规', star: 10 },
];
onMounted(() => {
  // nextTick(() => {
  setTimeout(() => {
    const fdata = [
      { stage: '季交易金额（万元）', number: 253 },
      { stage: '月交易金额（万元）', number: 151 },
      { stage: '周交易金额（万元）', number: 113 },
    ];

    const funnelPlot = new Funnel('funnelcontainer', {
      data: fdata,
      xField: 'stage',
      yField: 'number',
      legend: false,
    });

    funnelPlot.render();

    fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
      .then((res) => res.json())
      .then((data) => {
        const line = new Line('linecontainer', {
          data,
          xField: 'year',
          yField: 'value',
          seriesField: 'category',
          xAxis: {
            type: 'time',
          },
          yAxis: {
            label: {
              // 数值格式化为千分位
              formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
            },
          },
        });

        line.render();
      });

    console.log(document.getElementById('container'))
    const radarPlot = new Radar('container', {
      data: data.map((d) => ({ ...d, star: d.star })),
      xField: 'name',
      yField: 'star',
      appendPadding: [0, 10, 0, 10],
      meta: {
        star: {
          alias: '风险值',
          min: 0,
          nice: true,
          formatter: (v) => Number(v).toFixed(2),
        },
      },
      xAxis: {
        tickLine: null,
      },
      yAxis: {
        label: false,
        grid: {
          alternateColor: 'rgba(0, 0, 0, 0.04)',
        },
      },
      // 开启辅助点
      point: {
        size: 2,
      },
      area: {},
    });
    radarPlot.render();
  }, 1000)
  // })
})
</script>

<style scoped>
header {
  /* background-image: url('/header.png');
  background-size: 100% 100%; */
}

.tech-text {
  background-image: -webkit-linear-gradient(top, rgb(149, 255, 255), rgb(35, 90, 231));
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.info-item {
  /* width: 38%; */
  height: 80px;
  position: relative;
  padding: 0;
  /* margin: 10px; */
  background-image: url('/user.png');
  background-position: center left -10px;
  background-repeat: no-repeat;
  background-size: 90px;
  float: left;
}

.info-item .content {
  padding: 15px 20px 0 0;
}

.container {
  display: flex;
}

.left {
  width: 28%;
}

.right {
  width: 28%;
}

.middle {
  flex: 1;
  padding: 0 10px;
}

.tags {
  width: 100%;
  height: 240px;
  margin-top: 10px;
}

header {
  /* background-color: #007bff; 顶部栏的背景色，蓝色调 */
  color: white;
  padding: 20px;
  text-align: center;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  margin: 0;
  font-size: 32px;
}
</style>
